<script lang="ts">
  import { cn } from "$lib/utils";
  export let width = 40;
  export let height = 40;
  export let x = -1;
  export let y = -1;
  export let strokeDashArray: string = "";
  export let squares: Array<[x: number, y: number]> = [[0, 0]];
  let className: any = "";
  export { className as class };
  let id = crypto.randomUUID().toString().slice(0, 8);
  export let fillColor = "rgb(156 163 175 / 0.3)";
  // : rgb(156 163 175 / 0.3)
  export let strokeWidth = 1;
</script>

<svg
  aria-hidden="true"
  class={cn(
    "pointer-events-none absolute inset-0 h-full w-full",
    className
  )}
  {...$$restProps}
  stroke={fillColor}
  stroke-width={strokeWidth}
>
  <defs>
    <pattern {id} {width} {height} patternUnits="userSpaceOnUse" {x} {y}>
      <path
        d="M.5 {height}V.5H{width}"
        fill="none"
        stroke-dasharray={strokeDashArray}
      />
    </pattern>
  </defs>
  <rect width="100%" height="100%" stroke-width={0} fill="url(#{id})" />
  {#if squares}
    <svg {x} {y} class="overflow-visible">
      {#each squares as sq}
        <rect
          stroke={fillColor}
          fill="none"
          stroke-width="0"
          width={width - 1}
          height={height - 1}
          x={sq[0] * width + 1}
          y={sq[1] * height + 1}
        />
      {/each}
    </svg>
  {/if}
</svg>
